<template>
    <div class="cart">
        <NavBarVue class="nav-bar">
            <div slot="center">购物车({{length}})</div>
        </NavBarVue>
        <CartListVue>

        </CartListVue>
        <CartBottomBarVue></CartBottomBarVue>
    </div>
</template>

<script>
    import NavBarVue from '@/components/common/navbar/NavBar.vue'
    import CartListVue from './childComps/CartList.vue'
    import CartBottomBarVue from './childComps/CartBottomBar.vue'

import { mapGetters } from 'vuex'

    export default{
        name : 'Cart',
        components : {
            NavBarVue,
            CartListVue,
            CartBottomBarVue
        },
        computed:{
            ...mapGetters({
                length : 'cartLength'
            })
        }
    }
</script>

<style scoped>
.cart{
    height: 100vh;
}

.nav-bar{
    background-color: var(--color-tint);
    color: #fff;
}
</style>